<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问</title>
  <style>
    .c1{
      background: red;
    }
    #d1{
      width: 200px;
      height: 100px;
      /*id优先级大于自定义故而成绿色*/
      /*background: green;*/
      border: 1px solid green;
    }
    #d2{
      width: 200px;
      height: 100px;
      background-color: green;
    }
  </style>
  <script>
    function f1(){
      let d1=document.getElementById("d1")
      d1.className="c1"
    }
    function f2(){
      let d2 = document.getElementById("d2");
      // 可以通过访问style属性的方式操作行内式的样式
      // style属性值是一系列的键值对
      // 因此,可以通过DOM对象.style.样式名的方式操作对应样式
      d2.style.width = "300px";
      d2.style.height = "300px";
      // 所有属性名全部使用驼峰命名法,不再使用-
      // 即:所有xxx-yyy的样式其属性名均为xxxYyy
      d2.style.backgroundColor = "blue";
      // 切割成圆
      d2.style.borderRadius = "50%"
    }
     function f3(){
      let image=document.getElementById("image")
      //    打印出来是带单位的如果直接加变成字符串添加
      image.style.left = parseInt(image.style.left) + 50 + "px";

    }
  </script>
</head>
<body>
<div id="d1" onclick="f1()">这是一个div</div>
<hr>
<div id="d2" onclick="f2()"></div>
<hr>
<!--style="position: relative;left: 0px"相对定位距离左边0像素-->
<img id="image" onmouseover="f3()" style="position: relative;left: 0px" src="../images/heihei.gif">
</body>
</html>